<template>
  <div class="courses-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Reading /></el-icon>
          <div class="header-text">
            <h2>课程中心</h2>
            <p>企业在线学习平台</p>
          </div>
        </div>
        <div class="header-actions">
          <el-input
            v-model="searchText"
            placeholder="搜索课程"
            clearable
            style="width: 300px;"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </el-card>

    <!-- 课程分类 -->
    <el-card shadow="never" class="category-card">
      <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange">
        <el-tab-pane label="全部课程" name="all" />
        <el-tab-pane label="技术开发" name="tech" />
        <el-tab-pane label="产品运营" name="product" />
        <el-tab-pane label="市场营销" name="marketing" />
        <el-tab-pane label="财务管理" name="finance" />
        <el-tab-pane label="人力资源" name="hr" />
        <el-tab-pane label="通用技能" name="general" />
      </el-tabs>
    </el-card>

    <!-- 课程列表 -->
    <div class="courses-grid">
      <el-card
        v-for="course in filteredCourses"
        :key="course.id"
        shadow="hover"
        class="course-card"
        @click="handleViewCourse(course)"
      >
        <div class="course-cover">
          <img :src="course.cover || '/default-course.jpg'" :alt="course.title" />
          <div class="course-overlay">
            <el-tag :type="getCategoryType(course.category)" size="small">
              {{ course.categoryName }}
            </el-tag>
            <el-tag v-if="course.isNew" type="danger" size="small">NEW</el-tag>
            <el-tag v-if="course.isHot" type="warning" size="small">HOT</el-tag>
          </div>
        </div>
        <div class="course-content">
          <h3 class="course-title" :title="course.title">{{ course.title }}</h3>
          <p class="course-description">{{ course.description }}</p>
          
          <div class="course-meta">
            <div class="meta-item">
              <el-icon><User /></el-icon>
              <span>{{ course.teacher }}</span>
            </div>
            <div class="meta-item">
              <el-icon><Clock /></el-icon>
              <span>{{ course.duration }}</span>
            </div>
            <div class="meta-item">
              <el-icon><VideoPlay /></el-icon>
              <span>{{ course.lessonsCount }}课时</span>
            </div>
          </div>

          <div class="course-footer">
            <div class="course-stats">
              <span class="student-count">{{ course.studentCount }}人学习</span>
              <el-rate v-model="course.rating" disabled show-score :max="5" />
            </div>
            <el-button
              type="primary"
              :disabled="course.enrolled"
              @click.stop="handleEnroll(course)"
            >
              {{ course.enrolled ? '已报名' : '立即学习' }}
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <el-empty v-if="filteredCourses.length === 0" description="暂无课程" />

    <!-- 课程详情对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      :title="currentCourse?.title"
      width="900px"
      destroy-on-close
    >
      <div v-if="currentCourse" class="course-detail">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="detail-cover">
              <img :src="currentCourse.cover || '/default-course.jpg'" :alt="currentCourse.title" />
            </div>
            <el-divider content-position="left">课程介绍</el-divider>
            <div class="detail-description">{{ currentCourse.detailDescription }}</div>
            
            <el-divider content-position="left">课程大纲</el-divider>
            <el-collapse v-model="activeChapter">
              <el-collapse-item
                v-for="(chapter, index) in currentCourse.chapters"
                :key="index"
                :name="index"
              >
                <template #title>
                  <div class="chapter-title">
                    <el-icon><Document /></el-icon>
                    <span>第{{ index + 1 }}章：{{ chapter.title }}</span>
                    <el-tag size="small" type="info">{{ chapter.lessons.length }}课时</el-tag>
                  </div>
                </template>
                <div class="lesson-list">
                  <div v-for="lesson in chapter.lessons" :key="lesson.id" class="lesson-item">
                    <el-icon><VideoPlay /></el-icon>
                    <span class="lesson-name">{{ lesson.title }}</span>
                    <span class="lesson-duration">{{ lesson.duration }}</span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-col>
          <el-col :span="8">
            <el-card shadow="never" class="info-card">
              <div class="info-item">
                <span class="info-label">讲师</span>
                <span class="info-value">{{ currentCourse.teacher }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">课时</span>
                <span class="info-value">{{ currentCourse.lessonsCount }}课时</span>
              </div>
              <div class="info-item">
                <span class="info-label">时长</span>
                <span class="info-value">{{ currentCourse.duration }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">难度</span>
                <el-tag :type="getDifficultyType(currentCourse.difficulty)" size="small">
                  {{ currentCourse.difficulty }}
                </el-tag>
              </div>
              <div class="info-item">
                <span class="info-label">学习人数</span>
                <span class="info-value">{{ currentCourse.studentCount }}人</span>
              </div>
              <div class="info-item">
                <span class="info-label">评分</span>
                <el-rate v-model="currentCourse.rating" disabled show-score :max="5" />
              </div>
              <el-divider />
              <el-button
                type="primary"
                size="large"
                :disabled="currentCourse.enrolled"
                @click="handleEnroll(currentCourse)"
                style="width: 100%;"
              >
                {{ currentCourse.enrolled ? '已报名' : '立即报名' }}
              </el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Reading, Search, User, Clock, VideoPlay, Document
} from '@element-plus/icons-vue'

// 状态
const searchText = ref('')
const activeCategory = ref('all')
const showDetailDialog = ref(false)
const currentCourse = ref(null)
const activeChapter = ref([0])

// 课程数据
const courses = ref([
  {
    id: 1,
    title: 'Vue 3 从入门到精通',
    description: '全面学习Vue 3框架，掌握Composition API和TypeScript',
    detailDescription: '本课程将带你深入学习Vue 3框架的核心特性，包括Composition API、响应式系统、组件开发等内容。',
    category: 'tech',
    categoryName: '技术开发',
    teacher: '张三',
    duration: '30小时',
    lessonsCount: 45,
    studentCount: 1256,
    rating: 4.8,
    difficulty: '中级',
    cover: '',
    isNew: true,
    isHot: true,
    enrolled: false,
    chapters: [
      {
        title: '基础入门',
        lessons: [
          { id: 1, title: 'Vue 3 简介', duration: '15分钟' },
          { id: 2, title: '开发环境搭建', duration: '20分钟' },
          { id: 3, title: '第一个Vue应用', duration: '25分钟' }
        ]
      },
      {
        title: 'Composition API',
        lessons: [
          { id: 4, title: 'setup函数详解', duration: '30分钟' },
          { id: 5, title: '响应式API', duration: '35分钟' }
        ]
      }
    ]
  },
  {
    id: 2,
    title: '产品思维与方法论',
    description: '培养产品思维，掌握产品设计和管理方法',
    detailDescription: '系统学习产品管理的核心方法论，包括需求分析、产品设计、项目管理等。',
    category: 'product',
    categoryName: '产品运营',
    teacher: '李四',
    duration: '20小时',
    lessonsCount: 30,
    studentCount: 856,
    rating: 4.6,
    difficulty: '初级',
    cover: '',
    isNew: false,
    isHot: true,
    enrolled: true,
    chapters: []
  },
  {
    id: 3,
    title: '数字营销实战技巧',
    description: '掌握现代数字营销的核心技能和实战方法',
    detailDescription: '从零开始学习数字营销，包括社交媒体营销、内容营销、数据分析等。',
    category: 'marketing',
    categoryName: '市场营销',
    teacher: '王五',
    duration: '25小时',
    lessonsCount: 35,
    studentCount: 632,
    rating: 4.7,
    difficulty: '中级',
    cover: '',
    isNew: true,
    isHot: false,
    enrolled: false,
    chapters: []
  },
  {
    id: 4,
    title: '财务报表分析',
    description: '学习财务报表的阅读和分析方法',
    detailDescription: '掌握三大财务报表的阅读技巧，学会财务数据分析方法。',
    category: 'finance',
    categoryName: '财务管理',
    teacher: '赵六',
    duration: '15小时',
    lessonsCount: 20,
    studentCount: 423,
    rating: 4.5,
    difficulty: '初级',
    cover: '',
    isNew: false,
    isHot: false,
    enrolled: false,
    chapters: []
  }
])

// 计算属性
const filteredCourses = computed(() => {
  let result = courses.value

  // 分类筛选
  if (activeCategory.value !== 'all') {
    result = result.filter(c => c.category === activeCategory.value)
  }

  // 搜索筛选
  if (searchText.value) {
    result = result.filter(c =>
      c.title.includes(searchText.value) ||
      c.description.includes(searchText.value) ||
      c.teacher.includes(searchText.value)
    )
  }

  return result
})

// 方法
const handleCategoryChange = () => {
  console.log('分类切换', activeCategory.value)
}

const handleViewCourse = (course) => {
  currentCourse.value = course
  showDetailDialog.value = true
}

const handleEnroll = (course) => {
  if (course.enrolled) {
    ElMessage.info('您已报名该课程')
    return
  }

  ElMessage.success('报名成功！')
  course.enrolled = true
  showDetailDialog.value = false
}

const getCategoryType = (category) => {
  const map = {
    tech: 'primary',
    product: 'success',
    marketing: 'warning',
    finance: 'danger',
    hr: 'info',
    general: ''
  }
  return map[category] || ''
}

const getDifficultyType = (difficulty) => {
  const map = {
    初级: 'success',
    中级: 'warning',
    高级: 'danger'
  }
  return map[difficulty] || ''
}
</script>

<style scoped>
.courses-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.category-card {
  margin-bottom: 20px;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.course-card {
  cursor: pointer;
  transition: all 0.3s;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.course-cover {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: -20px -20px 0 -20px;
}

.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}

.course-content {
  padding: 16px 0 0 0;
}

.course-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-description {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #909399;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #EBEEF5;
}

.course-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.student-count {
  font-size: 12px;
  color: #909399;
}

.course-detail {
  padding: 20px 0;
}

.detail-cover {
  width: 100%;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin-bottom: 20px;
}

.detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-description {
  font-size: 14px;
  line-height: 1.8;
  color: #606266;
}

.chapter-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.lesson-list {
  padding: 12px 0;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.lesson-item:hover {
  background-color: #f5f7fa;
}

.lesson-name {
  flex: 1;
  font-size: 14px;
  color: #303133;
}

.lesson-duration {
  font-size: 13px;
  color: #909399;
}

.info-card {
  background-color: #f5f7fa;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #EBEEF5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #606266;
}

.info-value {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}
</style>

